<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- 1. 所有具有 src 属性的标签，都可以跨域 -->
  <!-- <img
    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201607%2F16%2F20160716092314_CLt2G.png&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1614214418&t=258d0ed5990eca687f1ba2401a6cf66d"
    alt="">
  <iframe src="https://www.baidu.com" frameborder="0"></iframe>
  <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script> -->


  <!-- 2. 用script标签的src属性去跨域请求接口。 -->
  <!-- 因为是使用script标签的src属性，所以浏览器加载得到的结果，会被当做js代码执行 -->
  <!-- <script src="./test.txt"></script> -->


  <!-- <script>
    // 提前准备好一个函数
    function xxx(res) {
      console.log(res)
    }

  </script>

  <script src="http://localhost:3006/api/jsonp?callback=xxx"></script> -->


  <!-- 3. jquery中封装的能够实现JSONP的方法 -->
  <script src="./jquery.js"></script>
  <script>
    $.ajax({
      dataType: 'jsonp', // 必须指定这项，表示发送JSONP请求，而不是ajax请求
      url: 'http://localhost:3006/api/jsonp',
      success: function (res) {
        console.log(res)
      }
    });
  </script>




</body>

</html>